<template>
  <div class="audition115">
    <p>1. display: none隐藏元素及其后代，所占据的空间消失，而visibility: hidden隐藏后所占据的空间不会消失</p>
    <p>2. display: none隐藏后，给其子元素设置display: block，其子元素也不会显示。而visibility: hidden在隐藏后，给其子元素设置visibility: visible，子元素会显示出来</p>
    <p>3. visibility: hidden并不影响元素次序的排列。但是display: none相当于让该元素消失了，元素次序会重新排列</p>
    <p>不好理解，需要举个例子演示一下：</p>
    <v-md-preview :text="text1" />
    <p>展示效果：</p>
    <ol>
      <li>第1个元素</li>
      <li>第2个元素</li>
      <li>第3个元素</li>
      <li>第4个元素</li>
    </ol>
    <p>此时，给li2设置样式：</p>
    <code class="code">
      .li2 {<br />
        <span class="indient">visibility: hidden;</span><br />
      }
    </code>
    <p>此时页面效果：</p>
    <ol>
      <li>第1个元素</li>
      <li style="visibility: hidden;">第2个元素</li>
      <li>第3个元素</li>
      <li>第4个元素</li>
    </ol>
    <p>第二个li虽然隐藏了，但是真个li的次序并没有变化</p>
    <p>此时，如果把li2样式改成：</p>
    <code class="code">
      .li2 {<br />
        <span class="indient">display: none;</span><br />
      }
    </code>
    <p>可以看到，此时剩下的li被重新排列了：</p>
    <ol>
      <li>第1个元素</li>
      <li style="display: none;">第2个元素</li>
      <li>第3个元素</li>
      <li>第4个元素</li>
    </ol>
    <p>--------------------</p>
    <p>4. css3的transition属性支持visibility，但是不支持display</p>
  </div>
</template>

<script>
const prefix = '``` html'
const suffix = '```'
export default {
  name: 'Audition115',
  data() {
    return {
      text1: `${prefix}
      <ol>
        <li>第1个元素</li>
        <li class="li2">第2个元素</li>
        <li>第3个元素</li>
        <li>第4个元素</li>
      </ol>
      \n${suffix}`,
    }
  }
}
</script>

<style lang="less" scoped>
ol {
  box-sizing: border-box;
  padding-left: 15px;
  background-color: pink;
}
ol li {
  list-style-type: unset;
}
</style>